<script setup lang="tsx">
import { onMounted, ref } from "vue";
import { lookupCollection, lookupCollections } from '@iconify/json'
import { getIcons } from '@iconify/utils'

const collections = ref<Array<any>>([])
const collectionDetail = ref<any>(null)

onMounted(async () => {
  // 获取所有图标集
  const allCollections = await lookupCollections()
  collections.value = Object.entries(allCollections).map(([prefix, meta]) => ({
    prefix,
    name: meta.name,
    total: meta.total,
    samples: meta.samples
  }))
  console.log('所有图标集:', collections.value)
  
  // 也可以继续使用原有的lookupCollection获取单个图标集详情
  collectionDetail.value = lookupCollection('iconify')
  console.log('单个图标集详情:', collectionDetail.value)
})
</script>
<template>
  <div class="p-4">
    <h2 class="text-xl font-bold mb-4">所有图标集</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div 
        v-for="item in collections" 
        :key="item.prefix" 
        class="border p-4 rounded-lg hover:bg-gray-50 transition-colors"
      >
        <div class="font-medium">{{ item.prefix }}</div>
        <div class="text-sm text-gray-600">{{ item.name }}</div>
        <div class="text-sm text-gray-500">图标数量: {{ item.total }}</div>
        <div v-if="item.samples && item.samples.length > 0" class="mt-2">
          <div class="text-xs text-gray-500">示例图标:</div>
          <div class="flex gap-2 mt-1">
            <span v-for="sample in item.samples.slice(0, 5)" :key="sample" class="text-xs">
              {{ sample }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped></style>